<template>
  <div id   ="pinlei">
      <div class="sanwu">
        <div >
          <span class="iconfont icon-hezi"></span>
          <span>最快29分钟达</span>
        </div>
        <div>
          <span class="iconfont icon-chengzhong"></span>
          <span>称重不足退差价</span>
        </div>
        <div>
          <span class="iconfont icon-anquanzhongxin"></span>
          <span>不好吃三无退货</span>
        </div>
      </div>
      <div class="leixing">
        <div class="baopin" v-for="(v,i) in arr" :key="i">
          <a  @click="fun()"><img :src="v.urlimg" alt=""></a>
          <p>{{v.title}}</p>
        </div>
        <!-- <div class="baopin">
          <a href=""><img src="youzi.jpg" alt=""></a>
          <p>柑橘橙柚</p>
        </div>
        <div class="baopin">
          <a href=""><img src="xiangjiao.jpg" alt=""></a>
          <p>苹果蕉梨</p>
        </div>
        <div class="baopin">
          <a href=""><img src="putao.jpg" alt=""></a>
          <p>葡提浆果</p>
        </div>
        <div class="baopin">
          <a href=""><img src="mugua.jpg" alt=""></a>
          <p>鲜果现切</p>
        </div> -->
        <div class="baopin">
          <a href="#" class="iconfont icon-icon-"></a>
          <p>次日达</p>
        </div>
        <div class="baopin">
          <a href="#" class="iconfont icon-fuli"></a>
          <p>新人红包</p>
        </div>
        <div class="baopin">
          <a href="#" class="iconfont icon-qiandao"></a>
          <p>签到</p>
        </div>
        <div class="baopin">
          <a href="#" class="iconfont icon-huiyuan"></a>
          <p>心享会员</p>
        </div>
        <div class="baopin">
          <a href="#" class="iconfont icon-pintuan"></a>
          <p>拼团</p>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        arr:[
          {title:"热销爆品",urlimg:require("@/assets/shouye/caomei.jpg")},
          {title:"柑橘橙柚",urlimg:require("@/assets/shouye/youzi.jpg")},
          {title:"苹果蕉梨",urlimg:require("@/assets/shouye/xiangjiao.jpg")},
          {title:"葡提浆果",urlimg:require("@/assets/shouye/putao.jpg")},
          {title:"鲜果现切",urlimg:require("@/assets/shouye/mugua.jpg")},
          ]
      }
    },
    methods:{
      fun(){
        this.$router.push("/fenlei")
      
      }
    }
}
</script>

<style  scoped>
    #pinlei{
    width: 100%;
    height: 2.2rem;
    /* background: yellow; */
  }
  #pinlei .sanwu{
    height: .35rem;
    line-height: 0.35rem;
    display: flex;
    font-size: .12rem;
    justify-content: space-around;
  }
  #pinlei .sanwu div span:nth-child(1){
    margin-right: .05rem;
  }
    #pinlei .leixing{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    #pinlei .leixing .baopin{
      width: 20%;
      text-align: center;
      margin-bottom: .2rem;
    }
    #pinlei .leixing .baopin img{
      width: 0.74rem;
      height: 0.65rem;
    }
    #pinlei .leixing .baopin p{
      font-size: 14px;
    }
    #pinlei .leixing .baopin a{
      font-size: .35rem;
    }
    .icon-icon-{
      color: pink;
    }
    .icon-fuli,.icon-qiandao{
      color: rgb(247,115,103);
    }
    .icon-huiyuan{
      color: rgb(108,105,104);
    }
    .icon-pintuan{
      color: rgb(249,163,54);
    }
</style>